<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :md="6" :sm="24">
                <a-form-item label="渠道来源" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请输入渠道来源" v-model="queryParam.source" :dropdownMatchSelectWidth="false"
                    showSearch optionFilterProp="children">
                    <a-select-option v-for="(item, index) in sourceList" :key="index" :value="item.name">{{ item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="客户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="输入客户姓名模糊查询" v-model="queryParam.name"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="信用等级" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请选择查询的信用等级" v-model.number="queryParam.credit"
                    :dropdownMatchSelectWidth="false" showSearch optionFilterProp="children">
                    <a-select-option v-for="(item, index) in credit_options" :key="index" :value="item">{{ item
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="输入身份证号模糊查询" maxLength="18" v-model="queryParam.idNumber"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="输入手机号码模糊查询" maxLength="11" v-model="queryParam.tel"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="9" :sm="24">
                <a-form-item label="客户创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-date placeholder="请输入创建时间" style="width: 140px;" dateFormat="YYYY-MM-DD"
                    v-model="queryParam.createTime1"></j-date>-
                  <j-date placeholder="请输入创建时间" style="width: 140px;" dateFormat="YYYY-MM-DD"
                    v-model="queryParam.createTime2"></j-date>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery">查询</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" style="border-top: 5px">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        </div>
        <div>
          <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
            :pagination="ipagination" :loading="loading" @change="handleTableChange">
            <span slot="action" slot-scope="text, record">
              <a @click="myHandleDetail(record)">详情</a>
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">编辑</a>
              <!-- <a-divider  v-if="btnEnableList.indexOf(6)>-1"  type="vertical"/> -->
              <!-- <a  v-if="btnEnableList.indexOf(6)>-1"  @click="handleProduce(record)">下单</a> -->
              <a-divider v-if="btnEnableList.indexOf(4) > -1" type="vertical" />
              <a-popconfirm v-if="btnEnableList.indexOf(4) > -1" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>

            </span>
            <!-- 状态渲染模板 -->
            <template slot="customRenderFlag" slot-scope="credit">
              <a-tag v-if="credit === '风险'" color="red">风险</a-tag>
              <a-tag v-if="credit === '正常'" color="green">正常</a-tag>
              <a-tag v-if="credit === '优秀'" color="cyan">优秀</a-tag>
              <a-tag v-if="credit === '极好'" color="blue">极好</a-tag>
              <a-tag v-if="credit === '黑名单'" color="gray">黑名单</a-tag>
            </template>
          </a-table>
        </div>
        <!-- table区域-end -->
        <CustomListModal @save="save" ref="modalForm" @ok="modalFormOk"></CustomListModal>
        <CustomListDetail ref="CustomListDetail"></CustomListDetail>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import CustomListModal from './modules/CustomListModal'
import CustomListDetail from './dialog/CustomListDetail'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
import { getConfigSourceList } from '@/api/api'
import JDate from '@/components/jeecg/JDate'

export default {
  name: "/CustomList",
  mixins: [JeecgListMixin],
  components: {
    CustomListModal,
    CustomListDetail,
    JInput,
    JDate
  },
  created() {
    // this.queryParam = this.$route.query;  
    if(this.$route.query.hasOwnProperty('date')) {
      console.log('query', this.$route.query);
      this.queryParam.createTime1 = this.$route.query.date[0];
      this.queryParam.createTime2 = this.$route.query.date[1];
    }
  },
  mounted(){
   this.getSourceList()
  },
  data() {
    return {
      labelCol: {
        span: 5
      },
      wrapperCol: {
        span: 18,
        offset: 1
      },
      sourceList: [],
      queryParam: {},
      credit_options: ["风险", "正常", "优秀", "极好", "黑名单"],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        { title: '渠道来源', dataIndex: 'source', width: 120, align: "center" },
        { title: '客户姓名', dataIndex: 'name', width: 80, align: "center" },
        { title: '联系电话', dataIndex: 'tel', width: 100, align: "center" },
        { title: '身份证号码', dataIndex: 'idNumber', width: 160, align: "center" },
        { title: '地址', dataIndex: 'address', width: 150, align: "center" },
        { title: '收益总和', dataIndex: 'profit', width: 75, align: "center" },
        { title: '信用等级', dataIndex: 'credit', width: 75, align: "center", scopedSlots: { customRender: "customRenderFlag" } },
        { title: '创建用户', dataIndex: 'createUserStr', width: 80, align: "center" },
        { title: '创建时间', dataIndex: 'createTimeStr', width: 120, align: "center" },
        // { title: '修改用户', dataIndex: 'updateUser', width: 80, align: "center"},
        { title: '修改时间', dataIndex: 'updateTimeStr', width: 120, align: "center" },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
          width: 170
        }
      ],
      url: {
        // list: "/engineer/list",
        list: "/custom/list",
        delete: "/custom/delete",
        // deleteBatch: "/engineer/deleteBatch",
        // batchSetStatusUrl: "/engineer/batchSetStatus"
      },
    }
  },

  methods: {
    myHandleDetail(record) {
      this.$refs.CustomListDetail.show(record);
      this.$refs.CustomListDetail.title = "详情";
    },
    searchQuery() {
      this.loadData(1);
    },
    searchReset() {
      this.queryParam = {}
      this.loadData(1);
    },
    save() {
      this.loadData(1)
    },
    getSourceList(params) {
      let that = this;
      getConfigSourceList(params).then((res)=>{
        if(res) {
          that.sourceList = res.data.operatorList;
        }
      });
    },
    handleEdit: function (record) {
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.disableSubmit = false;
      if (this.btnEnableList.indexOf(1) > -1) {
        this.$refs.modalForm.isReadOnly = true
      }
    },
    handleSupply: function (record) {
      this.$refs.engineerSupplyModal.add(record);
      this.$refs.engineerSupplyModal.title = "工程补充";
      this.$refs.engineerSupplyModal.disableSubmit = false;
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>